<template>
    <div>
      <!-- 通过动态组件来渲染不同的组件 -->
      <component :is = "currentComponent"></component>
  
      <!-- 按钮用于切换组件 -->
      <button @click="showComponentA">显示组件A</button>
      <button @click="showComponentB">显示组件B</button>
    </div>
  </template>
  
  <script>
  import ComponentA from '../../component/ComponentA.vue';
  import ComponentB from '../../component/ComponentB.vue';

  export default {
    data() {
      return {
        currentComponent: 'ComponentA'
      };
    },
    components: {
      ComponentA,
      ComponentB
    },
    methods: {
      showComponentA() {
        this.currentComponent = 'ComponentA';
      },
      showComponentB() {
        this.currentComponent = 'ComponentB';
      }
    }
  }
  </script>
  